<template>
	<!-- 店铺认证 -->
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<view class="step-box p-2">
			<step :active="active" />
		</view>
		<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form" label-width="120">
				<view class="pdf-box p-2">
					<title title="店铺信息"></title>
					<view class="pl-2 pr-2">
						<!-- <uni-forms-item required label="注册地址" name="registered_address">
							<uni-easyinput type="text" v-model="formData.registered_address" placeholder="请填写注册地址" />
						</uni-forms-item> -->
						<uni-forms-item required name="business_licence_number" label="营业执照号" label-width="120">
							<uni-easyinput type="text" v-model="formData.business_licence_number"
								placeholder="请填写营业执照号" />
						</uni-forms-item>
						<uni-forms-item required name="union_business_license_plate_name" label="营业执照名称"
							label-width="120">
							<uni-easyinput type="text" v-model="formData.union_business_license_plate_name"
								placeholder="请填写营业执照名称" />
						</uni-forms-item>
						<uni-forms-item required label="营业执照开始日期" name="business_license_start_time" label-width="120">
							<uni-datetime-picker type="date" :clear-icon="false"
								v-model="formData.business_license_start_time" placeholder="请填写营业执照开始日期" />
						</uni-forms-item>
						<uni-forms-item required name="business_license_end_time" label="营业执照结束日期" label-width="120">
							<uni-datetime-picker type="date" :clear-icon="false"
								v-model="formData.business_license_end_time" placeholder="请填写营业执照结束日期" />
						</uni-forms-item>
						<uni-forms-item required label="营业地址补充信息" name="business_address_detail" label-width="120">
							<uni-easyinput type="text" v-model="formData.business_address_detail"
								placeholder="请填写营业地址补充信息" />
						</uni-forms-item>
						<view class="upload-box p-2">
							<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
							<view class="id d-flex flex-row j-sb">
								<uploadImage :limit="1" :imageValue="front_door_photo" headTitle="门头照片" class="flex-1"
									@imgurl="getFrontDoorPhoto" />
								<uploadImage :limit="1" :imageValue="interior_photo" headTitle="室内照片"
									class="flex-1" @imgurl="getInteriorPhoto" />
							</view>
						</view>
						<view class="upload-box p-2">
							<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
							<view class="id d-flex flex-row j-sb">
								<uploadImage :limit="1" :imageValue="zhizhao" headTitle="商户营业执照" class="flex-1"
									@imgurl="getZhizhao" />
							</view>
						</view>
						<view class="upload-box p-2" v-if="account_number_type == 2">
							<p class="font-sm text-danger">* 以下所需上传的图片仅支持JPG/PNG格式，图片大小需要5M以内</p>
							<view class="id d-flex flex-row j-sb">
								<uploadImage :limit="1" :imageValue="corporate_prove" headTitle="对公结算证明" class="flex-1"
									@imgurl="getCorporateProve" />
							</view>
						</view>
					</view>
					<view class="button-box p-2">
						<button class="main-bg-color text-white font-md" @click="submit">下一步</button>
					</view>

				</view>
			</uni-forms>

		</scroll-view>
	</view>
</template>

<script>
	import step from "@/components/step/index.vue"
	import title from "@/components/common/title.vue"
	import uploadImage from "@/components/common/uploadImage.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			step,
			title,
			uploadImage,
			cuCustom
		},
		data() {
			return {
				active: 2,
				scorllHeight: 500,
				imageValue: [],
				front_door_photo:[],
				interior_photo:[],
				corporate_prove:[],
				zhizhao:[],
				account_number_type:null,
				formData: {
					registered_address: "",
					business_licence_number: "",
					union_business_license_plate_name: "",
					business_license_start_time: "",
					business_license_end_time: "",
					business_address_detail: "",
					corporate_prove: "",
					front_door_photo:"",
					interior_photo:"",
					corporate_prove:"",
					zhizhao:""
				},
				rules: {
					// 对name字段进行必填验证
					// registered_address: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入注册地址',
					// 		}
					// 	]
					// },
					// 对email字段进行必填验证
					business_licence_number: {
						rules: [{
							required: true,
							errorMessage: '请输入营业执照号',
						}]
					},
					union_business_license_plate_name: {
						rules: [{
								required: true,
								errorMessage: '请输入营业执照名称',
							}

						]
					},
					business_license_start_time: {
						rules: [{
								required: true,
								errorMessage: '请输入营业执照开始日期',
							}

						]
					},
					business_license_end_time: {
						rules: [{
								required: true,
								errorMessage: '请输入营业执照结束日期',
							}

						]
					},
					business_address_detail: {
						rules: [{
								required: true,
								errorMessage: '请输入补充地址',
							}

						]
					}

				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(200)
				})
			})
		},
		onShow() {
			this.account_number_type = uni.getStorageSync('personalInfo').account_number_type
		},
		methods: {
			// 触发提交表单
			submit() {
				console.log(this.formData.front_door_photo)
				if(this.formData.front_door_photo == ""){
					uni.showToast({
						title:"请上传门头照片",
						icon:"none"
					})
					return false
				}
				if(this.formData.interior_photo == ""){
					uni.showToast({
						title:"请上传室内照片",
						icon:"none"
					})
					return false
				}
				if(this.account_number_type ==2){
					if(this.formData.corporate_prove == ""){
						uni.showToast({
							title:"请上传对公结算证明",
							icon:"none"
						})
						return false
					}
				}
				let _that = this
				this.$refs.form.validate().then(res => {
					const params = Object.assign({}, _that.formData, uni.getStorageSync('personalInfo'))
					params.user_id = uni.getStorageSync("USER_ID")
					interceptor.get('/supplier_applet_api.php?act=addSupplier', params).then((res) => {
						uni.setStorage({
							key: 'supplier_id',
							data: res.info.supplier_id,
							success() {
								uni.removeStorageSync('personalInfo');
								uni.navigateTo({
									url: './result'
								})
							}
						})
					})

				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			//  门头照片
			getFrontDoorPhoto(value) {
				this.front_door_photo = []
				this.formData.front_door_photo = value
				this.front_door_photo.push({
					url: this.returnImg(value)
				})
			},
			//  室内照片
			getInteriorPhoto(value) {
				this.interior_photo = []
				this.formData.interior_photo = value
				this.interior_photo.push({
					url: this.returnImg(value)
				})
			},
			//  对公结算证明
			getCorporateProve(value) {
				this.corporate_prove = []
				this.formData.corporate_prove = value
				this.corporate_prove.push({
					url: this.returnImg(value)
				})
			},
			getZhizhao(value) {
				this.zhizhao = []
				this.formData.zhizhao = value
				this.zhizhao.push({
					url: this.returnImg(value)
				})
			},
			returnImg(img) {
				return `${getApp().globalData.baseUrl}/${img}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.upload-box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}

		.uni-easyinput__content {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-select {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x--border {
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}
</style>